<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<h1>Espacio</h1>
<div id="spaceInfo" class="leftSection">
    <div id='spaceTittle'>Universidad Simon Bolivar</div>
    <div id='spaceImg'><img alt="Imagen USB no disponible"  src='style/images/Espacios/usb.gif'/></div>
    <div id="pisos"></div>
</div>
<select id="edificios"></select>
<div class="leftSection">
    <h4>Consulta</h4>
    <center><br><img alt="Cargando" src="style/images/cargando.gif" class="consultaCargandoImg"/><br></center>
    <form action="#"  id="consultarExtintorForm" class="oculta consultaCargando">
        <table cellspacing="5">
            <tr><td>Categoria</td>
                <td><select id="categoriasExt" name="categoria"></select></td>
            </tr>
            <tr><td>Tipo</td>
                <td><select id="tiposExt" name="tipo"></select></td>
            </tr>
            <tr><td>Status</td>
                <td><select id="statusExt" name="status"></select></td>
            </tr>
            <tr><td>Referencia</td>
                <td><input type="text" id="referenciaExt" name="referencia"/></td>
            </tr>
            <tr><td colspan="2"><input type="button" value="Consultar" id="consultarExtintor"/></td></tr>
        </table>
    </form>
</div>
<br>
<div id="Simbologia" class="leftSection">
    <h4>Simbolog&iacute;a</h4>
    <br>
    <table>
        <tr>
            <td>
                <img alt="extintor" src="style/images/Mapas/SistemasExtincion/Extintor.gif" id="extintorSample"/>  Extintor
            </td>
            <td>
                <img alt="rociador" src="style/images/Mapas/SistemasExtincion/Rociador.gif" id="rociadorSample"/>  Rociador
            </td>
        </tr>
        <tr>
            <td>
                <img alt="hidrante" src="style/images/Mapas/SistemasExtincion/Hidrante.gif" id="hidranteSample"/>  Hidrante
            </td>
            <td>
                <img alt="manguera" src="style/images/Mapas/SistemasExtincion/Manguera.gif" id="mangueraSample"/>  Manguera
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript" src="Modulo2/js/controlPiso.js" />
<script type="text/javascript" src="Modulo2/js/controlSistemasExtincion.js" />
<script type="text/javascript">
    $('#edificios').change(function(){
        ed = $('#edificios :selected').val();
        if(ed == "") return;
        $('#spaceTittle').html(ed);
        $('#spaceImg').load('Modulo2/Templates/spaceImg.jsp?espacio='+ed.replace(" ", "", "gi"));
        getPisos(ed);
    });

    $('#categoriasExt').change(function(){
        cat = $('#categoriasExt :selected').val();
        if(cat == "") return;
        getTiposExtincion(cat);
    });

    $('#consultarExtintor').click(function(){
        $('#consultarExt').css('display','block');
        consultarExtintor();
    });
</script>